<template>
  <div style="display: flex; flex-direction: column; height: 100%; gap: 10px">
    <div style="flex: 1; display: flex; gap: 10px">
      <content-area title="数据集" style="flex: 1">
        <clickable-list
          :list-items="data.map((item) => item.name)"
          @item-clicked="changeDataIndex"
        ></clickable-list>
      </content-area>
      <content-area title="数据集视频">
        <video controls :src="data[dataIndex].video" width="600"></video>
      </content-area>
      <content-area title="定位测试" style="flex: 1">
        <clickable-list
          :list-items="results.map((item) => item.name)"
          @item-clicked="changeResultsVideoIndex"
        ></clickable-list>
      </content-area>
      <content-area title="定位视频">
        <video controls :src="results[resultsVideoIndex].video" width="600"></video>
      </content-area>
    </div>
    <div style="flex: 1; display: flex; gap: 10px">
      <content-area title="定位输出" style="flex: 1">
        <clickable-list
          :list-items="results.map((item) => item.name)"
          @item-clicked="changeResultsIndex"
        ></clickable-list>
      </content-area>
      <content-area title="3轴坐标">
        <el-image
          :src="results[resultsIndex].xyz"
          :preview-src-list="[results[resultsIndex].xyz]"
          style="height: 350px"
        />
      </content-area>
      <content-area title="绝对位姿误差(APE)">
        <el-image
          :src="results[resultsIndex].ape"
          :preview-src-list="[results[resultsIndex].ape, results[resultsIndex].apeValue]"
          style="height: 350px"
        />
      </content-area>
      <content-area title="相对位姿误差(RPE)">
        <el-image
          :src="results[resultsIndex].rpe"
          :preview-src-list="[results[resultsIndex].rpe, results[resultsIndex].rpeValue]"
          style="height: 350px"
        />
      </content-area>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

onMounted(() => {
  fetchData();
  fetchResults();
});

const data = ref([{ name: "", video: "" }]);
const dataIndex = ref(0);
const changeDataIndex = (index: number) => {
  dataIndex.value = index;
};
const fetchData = async () => {
  try {
    const res = await fetch("http://localhost:5000/slam/data");
    data.value = await res.json();
  } catch (error) {
    console.error("请求出错：", error);
  }
};

const results = ref([
  { name: "", video: "", xyz: "", ape: "", apeValue: "", rpe: "", rpeValue: "" },
]);
const resultsIndex = ref(0);
const changeResultsIndex = (index: number) => {
  resultsIndex.value = index;
};
const resultsVideoIndex = ref(0);
const changeResultsVideoIndex = (index: number) => {
  resultsVideoIndex.value = index;
};
const fetchResults = async () => {
  try {
    const res = await fetch("http://localhost:5000/slam/results");
    results.value = await res.json();
  } catch (error) {
    console.error("请求出错：", error);
  }
};
</script>

<style scoped></style>
